<template>
  <view class="warp" :style="themeStyleVar">
    <view class="content" :style="{ 'background-color': config.bgColor }" @click="touchContent">
      <view class="barrage-text" :style="barrageTextStyle"><view :class="{ 'ani-move': config.move }" :style="{ 'width': `${aniBoxWidth}rpx`, 'animation-duration': `${aniTime}s` }">{{ config.barrageText }}</view></view>
    </view>

     <u-icon v-if="!fullScreen" name="lock" :color="lock ? config.textColor : '#333'"  @click="changeLock"></u-icon>
    <view v-if="!fullScreen && !lock" class="footer">
      <u-icon name="lock-open" @click="changeLock"  size="35"></u-icon>
      <input v-model="config.barrageText" class="tag-input" type="text">
      <u-icon name="setting" size="35" @click="showConfigModel(true)"></u-icon>
    </view>

    <!-- 配置组件弹窗开始 -->
    <s-popup v-model="visibleConfigModel" position="bottom" :mask-opacity="0" :prevent-touchmove="true" @hide="showConfigModel(false)">
      <config-model :config="config" @changeConfig="changeConfig" @hide="showConfigModel(false)" @saveConfig="saveConfig" @changeConfigEffect="changeConfigEffect"></config-model>
    </s-popup>
    <!-- 弹窗结束 -->
  </view>
</template>

<script>
import SPopup from '@/components/s-popup/index.vue'
import ConfigModel from '@/components/sub-pack-a/hand-held-barrage/config-model/index.vue' // 配置组件

export default {
  components: {
    SPopup,
    ConfigModel
  },
  data() {
    return {
      lock: false, // 锁
      fullScreen: false, // 是否全屏展示
      config: { // 弹幕样式配置
        barrageText: '手持弹幕',
        effect: { // 特效
          bold: true, // 加粗
          shadow: false, // 阴影
          solid: false, // 立体
          shake: false, // 抖动
          scribe: false // 划线
        },
        textColor: 'rgba(255, 255, 255, 1)', // 文字颜色
        bgColor: 'rgba(0, 0, 0, 1)', // 背景色
        move: true, // 文字是否开启滚动
        textSize: 20, // 文字大小
        margin: 5, // 文字间距
        aniSpeed: 5, // 滚动速度
        brightness: 0 // 屏幕亮度
      },
      configId: '', // 配置Id
      timer: null,
      visibleConfigModel: false // 是否展示配置组件
    }
  },
  computed: {
    navBarConf() { return this.$store.getters.getNavBarConf }, // 获取设备头部安全区和标题高度
    themeStyleVar() { return this.$store.getters.getThemeStyleVar }, // 当前主题色卡变量
    userInfo() { return this.$store.getters.getUserInfo }, // 用户信息
    // 字幕宽度
    aniBoxWidth() {
      const barrageText = this.config.barrageText
      const textLen = JSON.stringify(barrageText).length
      const fontW = Number(this.config.textSize) * 9
      const spacW = Number(this.config.margin) * 10
      const width = (fontW + spacW) * textLen
      uni.showToast({
        title: width,
        icon: 'none'
      })
      return width
    },
    // 循环时间，滚动一轮需要的时间
    aniTime() { return Number(this.aniBoxWidth) / 50 / this.config.aniSpeed },
    // 处理文字阴影及立体效果
    effectShadow() {
      const textColors = this.config.textColor.replace(/([rgba\(\)])/g, '').split(',')
      const shadowColor = `rgba(${textColors[0]}, ${textColors[1]}, ${textColors[2]}, 0.3)`
      let str = this.config.effect.shadow ? `0 0 20px ${this.config.textColor}` : `0 0 0px ${shadowColor}`
      if (this.config.effect.solid) {
        for (let i = 1; i <= 8; i++) {
          str += `, ${i}px -${i}px 0 ${shadowColor}`
        }
      }
      return str
    },
    // 字幕style
    barrageTextStyle() {
      let styleStr = ''
      // 文字颜色
      styleStr += `color: ${this.config.textColor};`
      // 文字大小
      styleStr += `font-size: ${this.config.textSize * 10}rpx;`
      // 间距
      styleStr += `letter-spacing: ${this.config.margin * 10}rpx;`
      // 加粗
      styleStr += `font-weight: ${this.config.effect.bold ? 'bold' : 'normal'};`
      // 阴影
      if (this.config.effect.shadow || this.config.effect.solid) { styleStr += `text-shadow: ${this.effectShadow};` }
      // 划线
      if (this.config.effect.scribe) { styleStr += `text-decoration: line-through;` }
      // 抖动
      if (!this.config.effect.shake) { styleStr += `animation: none;` }

      return styleStr
    }
  },
  watch: {
    // 锁住时锁展示会在2秒后隐藏
    fullScreen(value) {
      //if (this.lock === true && value === false) { this.autoFull() }
    }
  },
  onLoad(option) { // 页面初次加载
    // 解析配置
    if (option.configId) {
      this.getConfig(option.configId)
    } else {
      uni.getScreenBrightness({
        success: (res) => {
          this.config.brightness = parseInt(res.value * 10)
        }
      })
    }
    
    // #ifdef MP-WEIXIN
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    // #endif
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '给您分享个好工具-手持弹幕',
        path: '/pages/tools/handheldbarrage'
      }
  },
  // #endif
  methods: {
    // 触摸屏幕
    touchContent() { this.fullScreen = !this.fullScreen },
    // 修改锁定状态
    changeLock() {
      this.lock = !this.lock
      // 锁定将全屏
      //if (this.lock) { this.autoFull() }
      // 解锁清除自动全屏
      //if (!this.lock) { this.timer && clearTimeout(this.timer) }
    },
    // 自动全屏
    autoFull() {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.fullScreen = true
      }, 2e3)
    },
    // 修改美化组件展示状态
    showConfigModel(status = true) { this.visibleConfigModel = status },
    // 特效
    changeConfigEffect(key) { this.config.effect[key] = !this.config.effect[key] },
    // 修改config中对应的值
    changeConfig(key, value) { this.config[key] = value },
    // 获取保存的配置
    async getConfig(id) {
      uni.showLoading({
        title: '配置同步中...',
        mask: true
      })

      const db = uniCloud.database()
      const collection = db.collection('barrage-config')
      const { result } = await collection.where({ _id: id }).get()

      if (result.data && result.data[0]) {
        this.config = result.data[0].config

        // 默认锁定
        this.lock = true
        // 默认全屏
        this.fullScreen = true
        // 设置屏幕亮度
        uni.setScreenBrightness({ value: this.config.brightness / 10 })
      }

      uni.hideLoading()
    },
    // 保存配置，生成配置ID
    async saveConfig() {
      uni.showLoading({
        title: '链接生成中...',
        mask: true
      })

      const db = uniCloud.database()
      const collection = db.collection('barrage-config')
      const { result } = await collection.add({
        user_id: this.$store.getters.getUid,
        config: this.config
      })
      this.configId = result.id
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>

  .warp {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .content {
    @include trans-center();
    width: 100vw;
    height: 100vh;

    .barrage-text {
      min-width: 100vh;
      height: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: 50vw 50vw;
      transform: rotate(90deg);
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      animation: textShake 0.5s linear infinite;

      .ani-move {
        animation: textMove 5s linear infinite;
        animation-fill-mode: forwards;
      }
    }
  }

  /*文字无缝滚动*/
  @keyframes textMove {
    0%{transform: translateX(100%);}
    100%{transform: translateX(-100%);}
  }

  /*文字无缝滚动*/
  @keyframes textShake {
    0%, 33% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
    34%, 66% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
    67%, 100% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    width: 100%;
    height: 120rpx;
    z-index: 22;

    .tag-input {
      width: calc(100% - 200rpx);
      height: 60rpx;
      margin: 20rpx 0;
      padding: 0 20rpx;
      border-radius: 12rpx;
      background-color: #F1F1F1;
      box-sizing: border-box;
      color: #333;
    }

  }

  .iconfont {
    width: 80rpx;
    height: 80rpx;
    margin: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45rpx;
    color: #333;
  }

  .lock {
    position: fixed;
    left: 0;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    bottom: constant(safe-area-inset-bottom);
    z-index: 33;
  }

</style>
